<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>caseOne</title>
</head>
<style>
  a{
    float: left;
    display:inline-block; /*转换为行内块才可以修改盒子的大小*/
    text-align: center; /*文字水平居中*/
    line-height: 50px; /*行高*/
    width: 120px;
    height: 50px;
    background-color: pink;
    background-repeat: no-repeat; /*背景图片不重复*/
  }
  .one{

    background-image: url(bg1.png);
  }
  .two{

    background-image: url(bg2.png);
  }
  .three{

    background-image: url(bg3.png);
  }
  .one:hover{
    color: green;
    height: 58px;
    background-image: url(bg4.png);
  }
  .two:hover{
    color: green;
    height: 58px;
    background-image: url(bg5.png);
  }
  .three:hover{
    color: green;
    height: 58px;
    background-image: url(bg6.png);
  }
p{
  background-color: pink;
  width: 100px;
  height: 100px;
  display:inline-block;
}
*{
  margin: 0 auto;
  padding: 0 ;
}


</style>
<body>
<a href="#" class="one">导航条1</a>
<a href="#" class="two">导航条2</a>
<a href="#" class="three">导航条3</a>
<p>hello</p>

<script>

</script>
</body>
</html>
